<template>
  <!-- 待审批绩效考核 -->

  <div class="Performance-approve">
    <!-- 顶部标题栏组件 -->
    <top-header :leftArrow="leftArrow"></top-header>
    <!-- 中间内容 -->
    <div class="content">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell-group v-for="(item, index) in performanceList" :key="index">
          <template #title>
            <span>{{item.year}}</span>
          </template>
          <van-cell v-for="(i,ind) in item.dto" :key="ind" @click="toDetail(i)">
            <template #title>
              <div class="van-title">
                <div class="title-left">
                  <van-tag plain type="primary" color="burlywood">{{ ind + 1 }}</van-tag>
                  <span style="margin-left:10px">{{i.assess_date | filterTime}} 绩效考核表</span>
                </div>
                <van-tag type="danger">未审核</van-tag>
              </div>
            </template>
            <template #label>
              <van-tag style="margin-left:0.7rem" size="medium" plain type="primary" color="burlywood">
                {{ i.staff_Name }}</van-tag>
              <van-tag style="margin-left:0.3rem" round type="primary" color="burlywood">{{ i.staff_DutyName }}
              </van-tag>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
    </div>
  </div>
</template>

<script>
import { TopHeader } from '@/components'
import { GetAssessForm } from '@/request/api'

export default {
  name: 'PerformanceApprove',
  components: {
    TopHeader
  },
  filters: {
    filterTime (val) {
      return val.slice(0, 7)
    }
  },
  data () {
    return {
      leftArrow: true, // 顶部标题栏组件是否有返回按钮
      loading: false,
      finished: false,
      serCount: 0, // 审核列表数据总量
      pageIndex: 0,
      userId: sessionStorage.getItem('userId'),
      performanceList: []
    }
  },
  methods: {
    onLoad () {
      // 异步更新数据
      setTimeout(() => {
        this.pageIndex++
        const param = { Id: '', assess_id: '', isChecked: false }
        GetAssessForm(param).then(res => {
          this.performanceList = [...this.performanceList, ...res.Data]
        })
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (10 * (this.pageIndex + 1) >= this.serCount) {
          this.finished = true
        }
      }, 1000)
    },
    // 页面跳转到详情
    toDetail (value) {
      console.log('跳转到详情页', value)
      sessionStorage.setItem('PERFORMANCE_LIST', JSON.stringify(value))
      // sessionStorage.setItem('History_Status', true)
      this.$router.push({ path: '/PerformanceAppraisal' })
    }
  }
}
</script>

<style lang="less" scoped>
.Performance-approve {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow: auto;
    .van-title {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
